.sw-view {cursor: pointer;font-size: 24px;}
.sw-view.on {color: #2e6da4;}
.sw-view.off {color: #666;}

.switch-root{
    width:fit-content;
    display: inline-block;
    cursor:pointer;
    padding-left: 6px;
    height:34px;
    padding-top:7px;
}
.switch-root.inline {
    margin-right:50px;
}
.switch-root.checked {
    padding-left:0
}
.switch-bg {
    display:block;width: 28px;height:12px;background-color:#000;
    float:left;border-radius: 8px;position: relative;margin-top: 2px;
    transition: background-color linear 80ms;opacity: .5;}
.switch-handler {
    display:block;
    width:16px;
    height:16px;
    margin-left: -23px;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
    transition: transform linear 80ms, background-color linear 80ms;
    transform: translate3d(18px, 0, 0);
    background-color:#fff;
}

.switch-root.checked>.switch-bg {
    background-color:#337ab7;
}
.switch-root.checked>.switch-handler {
    background-color:#337ab7;
    margin-left: 1px;
}